<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="css/global.css" media="all" /> 
  <link rel="stylesheet" type="text/css" href="css/index.css" media="all" /> 
  <title>Othello with someone!!</title>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>Othello with someone</h1>
    </div>
    
    <div id="contents">
      <!-- 概要 -->
      <div id="introduction">
        <h2>さてさて、どこかの誰かとオセロでもどうでしょう？</h2>
        <p>
          たまたま一緒にアクセスしたどこかの誰かとオセロをすることができます。
          誰と手合わせをするかは運次第。
        </p>
        <p>
          相手が見つからない場合は知り合いを誘ってみるのもいいかもしれませんよ？
        </p>
        <a href="/lounge">
          <p id="entrance">
            Enter to "Othello with someone"!!
          </p>
        </a>
      </div>
      
      <!-- 説明部分 -->
      <div id="description">
        <h3>遊び方</h3>
        <p>
          上のエントランスから待ち合わせページに入室すると自動的にマッチング処理が行われます。
          誰かが先に入室している場合には即座にマッチングが行われ、ゲーム画面に移行します。
          この場合、先攻（駒の色は黒）となります。
        </p>
        <p>
          先に入室している相手が存在しなかった場合には誰かが後から入室してくるのを待つことになります。
          誰かが入室してきた場合、自動的にゲーム画面に移行します。
          この場合、後攻（駒の色は白）となります。
        </p>
        <p>
          マッチングに成功するとゲーム画面に自動的に移行します。
          自分の手番では画面を左クリックすることでルールに則った場所に石を置くことが可能です。
          相手の手番では石が置かれるのを待ってください。相手の配置した情報は自動的に通知され、画面に反映されます。
          また、現在は実装されていませんが、相手にタッピングする機能を検討しています。
          どちらも石を配置することができなくなった時点でゲーム終了となり、石のカウントと勝敗が表示されます。
        </p>
        <h3>リセットについて</h3>
        <p>
          相手がゲームの途中に不在となってしまった場合の対応のためにリセットを行うことができます。
          リセットを行った場合、現在のゲーム状態、待ち合わせの状態が削除されます。
          次に待ち合わせページへ入室すると新規のマッチングを行うことができます。
        </p>
        <h3>ルール</h3>
        <ul>
          <li>黒が先手です。（後から入室した方が黒となります。）</li>
          <li>縦、横、斜めの方向で相手の石を自分の石で挟むことが出来る場合、その場所に石を打つことが可能です。</li>
          <li>打てる場所がある場合は必ず打たなければなりません。</li>
          <li>打てる場所がない場合パスとなり相手の手番になります。（パスに回数制限はありません。）</li>
          <li>双方が打てなくなったらゲーム終了です。</li>
          <li>石の多いほうが勝者となります。</li>
        </ul>
        <p>
          ルールについては<a href="http://www.othello.org/rule/">こちら</a>を参考にさせていただきました。
        </p>
      </div>
    </div>
    
    <!-- 情報エリア -->
    <div id="information">
    </div>
    
    <div id="footer">
      <p id="caution">当サイトはJavascriptを使用しています、ONにしてお楽しみください。</p>
      <p id="sign">2010. presented by <a href="http://twitter.com/#!/onjiro_mohyahya">onjiro_mohyahya</a></p>
    </div>
  </div>
</body>
</html>
